<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-09-14 22:51:13
 * @Description: file content
 * @FilePath: \ebook\src\components\shelf\ShelfList.vue
-->
<template>
  <div class="shelf-list" :style="{top: shelfListTop}">
    <transition-group name="list" tag="div" id="shelf-list">
      <div class="shelf-list-item-wrapper" v-for="item in data" :key="item.id" v-show="(item.private&&shelftype===2)||(!item.private&&shelftype===1)">
        <shelf-item :data="item" :style="{height:itemHeight}" @changeSelected="reverseSelected(item)"></shelf-item>
        <div class="shelf-list-title-wrapper">
          <span class="shelf-list-title title-small">{{item.title}}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import { storeShelfMixin } from '../../utils/mixin'
import ShelfItem from './ShelfItem.vue'
import { realPx, px2rem } from '../../utils/utils'
export default {
  mixins: [storeShelfMixin],
  components: {
    ShelfItem
  },
  props: {
    top: {
      type: Number,
      default: 94
    },
    data: Array
  },
  computed: {
    itemHeight () {
      if (window.innerWidth > 1332) {
        return ((1332 - realPx(120)) / 4 / 250 * 350) + 'px'
      } else {
      // 图片宽高250*350，一行总padding为120
        return ((window.innerWidth - realPx(120)) / 4 / 250 * 350) + 'px'
      }
    },
    shelfListTop () {
      return px2rem(this.top) + 'rem'
    },
    shelftype () {
      return this.shelfType
    }
  },
  methods: {
    reverseSelected (item) {
      item.selected = !item.selected
    }
  }
}
</script>

<style lang="scss" scoped>
  .shelf-list{
    position: absolute;
    left: 0;
    z-index: 100;
    width:100%;
    #shelf-list{
      display: flex;
      flex-flow: row wrap;
      width:100%;
      padding: 0 px2rem(15);
      box-sizing: border-box;
      .shelf-list-item-wrapper{
        flex: 0 0 25%;
        width: 25%;
        padding: px2rem(15);
        box-sizing: border-box;
        &.list-leave-active{
          display: none;
        }
        &.list-move{
          transition: transform .5s;
        }
        .shelf-list-title-wrapper{
          margin-top: px2rem(10);
        }
      }
    }
  }
</style>
